<template>
	<view class="container">
		<!-- 头部菜单 -->
		<view class="order-tit">
			<text @click="onStsTap($event)" data-sts="0" :class="sts == 0 ? 'on' : ''">全部</text>
			<text @click="onStsTap($event)" data-sts="1" :class="sts == 1 ? 'on' : ''">待支付</text>
			<text @click="onStsTap($event)" data-sts="2" :class="sts == 2 ? 'on' : ''">待发货</text>
			<text @click="onStsTap($event)" data-sts="3" :class="sts == 3 ? 'on' : ''">待收货</text>
			<text @click="onStsTap($event)" data-sts="5" :class="sts == 5 ? 'on' : ''">已完成</text>
		</view>
		<!-- end 头部菜单 -->
		<!--start 订单列表 -->
		<view class="main">
			<view class="empty" v-if="list.length == 0"> 还没有任何相关订单 </view>
			<!-- 订单列表 -->
			<block v-for="(item, index) in list" :key="index">
				<view class="prod-item">
					<view class="order-num">
						<text>订单编号：{{ item.orderNumber }}</text>
						<view class="order-state">
							<text :class="
								'order-sts' +
								(item.status == 1 ? 'red' : '') +
								' ' +
								(item.status == 5 || item.status == 6 ? 'gray' : '')
							">{{
		item.status == 1
			? "待支付"
			: item.status == 2
				? "待发货"
				: item.status == 3
					? "待收货"
					: item.status == 5
						? "已完成"
						: "已取消"
}}</text>

							<view class="clear-btn" v-if="item.status == 5 || item.status == 6">
								<image src="../../static/icon/clear-his.png" class="clear-list-btn" @click="delOrderList($event)"
									:data-ordernum="item.orderNumber"></image>
							</view>
						</view>
					</view>

					<!-- 商品列表 -->
					<!-- 一个订单单个商品的显示 -->
					<block v-if="item.orderItemDtos.length == 1">
						<block v-for="(prod, ind) in item.orderItemDtos" :key="ind">
							<view>
								<view class="item-cont" @click="toOrderDetailPage($event)" :data-ordernum="item.orderNumber">
									<view class="prod-pic">
										<image :src="prod.pic"></image>
									</view>
									<view class="prod-info">
										<view class="prodname">
											{{ prod.prodName }}
										</view>
										<view class="prod-info-cont">{{ prod.skuName }}</view>
										<view class="price-nums">
											<text class="prodprice"><text class="symbol">￥</text>
												<text class="big-num">{{
														parsePrice(prod.price)[0]
												}}</text>
												<text class="small-num">.{{ parsePrice(prod.price)[1] }}</text></text>
											<text class="prodcount">x{{ prod.prodCount }}</text>
										</view>
									</view>
								</view>
							</view>
						</block>
					</block>
					<!-- 一个订单多个商品时的显示 -->
					<block v-else>
						<view class="item-cont" @click="toOrderDetailPage($event)" :data-ordernum="item.orderNumber">
							<scroll-view scroll-x="true" scroll-left="0" scroll-with-animation="false" class="categories">
								<block v-for="(prod, ind) in item.orderItemDtos" :key="ind">
									<view class="prod-pic">
										<image :src="prod.pic" lazy-load></image>
									</view>
								</block>
							</scroll-view>
						</view>
					</block>

					<view class="total-num">
						<text class="prodcount">共{{ item.orderItemDtos.length }}件商品</text>
						<view class="prodprice">合计：
							<text class="symbol">￥</text>
							<text class="big-num">{{ parsePrice(item.actualTotal)[0] }}</text>
							<text class="small-num">.{{ parsePrice(item.actualTotal)[1] }}</text>
						</view>
					</view>
					<!-- end 商品列表 -->
					<view class="prod-foot">
						<view class="btn">
							<text v-if="item.status == 1" class="button" @click="onCancelOrder($event)"
								:data-ordernum="item.orderNumber" hover-class="none">取消订单</text>
							<text class="button warn" :data-ordernum="item.orderNumber" hover-class="none"
								@click="onPayAgain($event)"> 再次购买 </text>
							<text text v -if=" item.status==1" class="button warn" @click="onPayAgain($event)"
								:data-ordernum="item.orderNumber" hover-class="none">付款</text>
							<text v-if="item.status == 3 || item.status == 5" class="button" @click="toDeliveryPage($event)"
								:data-ordernum="item.orderNumber" hover-class="none">查看物流</text>
							<text v-if="item.status == 3" class="button warn" @click="onConfirmReceive($event)"
								:data-ordernum="item.orderNumber" hover-class="none">确认收货</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!--end 订单列表 -->
	</view>
</template>

<script>
import { request } from "../../utils/http.js";
import { parsePrice } from "../../wxs/numbers.js";
export default {
	data() {
		return {
			list: [],
			current: 1,
			pages: 0,
			sts: 0,
		};
	},
	onLoad: function (options) {
		if (options.sts) {
			this.sts = options.sts;
			this.loadOrderData(options.sts, 1);
		} else {
			this.loadOrderData(0, 1);
		}
	},
	methods: {
		parsePrice,
		loadOrderData: function (sts, current) {
			var ths = this;
			uni.showLoading();
			//加载订单列表
			var params = {
				url: "/p/myOrder/myOrder",
				method: "GET",
				data: {
					current: current,
					size: 10,
					status: sts,
				},
				callBack: function (res) {
					//console.log(res);
					var list = [];
					if (res.current == 1) {
						list = res.records;
					} else {
						list = ths.list;
						Array.prototype.push.apply(list, res.records);
					}

					(ths.list = list),
						(ths.pages = res.pages),
						(ths.current = res.current);

					uni.hideLoading();
				},
			};
			request(params);
		},
		onStsTap(e) {
			/**
			 * 状态点击事件
			 */
			var sts = e.currentTarget.dataset.sts;
			this.sts = sts;
			this.loadOrderData(sts, 1);
		},
		delOrderList(e) {
			/*删除已完成||已取消的订单*/
			var ths = this;
			uni.showModal({
				title: "",
				content: "确定要删除此订单吗？",
				confirmColor: "#eb2444",
				success(res) {
					if (res.confirm) {
						var ordernum = e.currentTarget.dataset.ordernum;
						uni.showLoading();
						var params = {
							url: "/p/myOrder/" + ordernum,
							method: "DELETE",
							data: {},
							callBack: function (res) {
								ths.loadOrderData(ths.sts, 1);
								uni.hideLoading();
							},
						};
						request(params);
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		},
		toOrderDetailPage(e) {
			uni.navigateTo({
				url:
					"/pages/order-detail/order-detail?orderNum=" +
					e.currentTarget.dataset.ordernum,
			});
		},
		onCancelOrder(e) {
			/*取消订单*/
			console.log("取消订单");
			var ordernum = e.currentTarget.dataset.ordernum;
			var ths = this;
			uni.showModal({
				title: "",
				content: "要取消此订单？",
				confirmColor: "#3e62ad",
				cancelColor: "#3e62ad",
				cancelText: "否",
				confirmText: "是",
				success(res) {
					if (res.confirm) {
						uni.showLoading({
							mask: true,
						});

						var params = {
							url: "/p/myOrder/cancel/" + ordernum,
							method: "PUT",
							data: {},
							callBack: function (res) {
								//console.log(res);
								ths.loadOrderData(ths.sts, 1);
								uni.hideLoading();
							},
						};
						request(params);
					} else if (res.cancel) {
						console.log('用户点击取消')
					}
				},
			});
		},
		onPayAgain(e) {
			console.log("123");
			/*付款*/
			uni.showLoading({
				mask: true,
			});
			var params = {
				url: "/p/order/pay",
				method: "POST",
				data: {
					payType: 1,
					orderNumbers: e.currentTarget.dataset.ordernum,
				},
				callBack: (res) => {
					//console.log(res);
					uni.hideLoading();
					uni.requestPayment({
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.packageValue,
						signType: res.signType,
						paySign: res.paySign,
						success: function () {
							uni.navigateTo({
								url:
									"/pages/pay-result/pay-result?sts=1&orderNumbers=" +
									e.currentTarget.dataset.ordernum,
							});
						},
						fail: function (err) {
							console.log("支付失败");
						},
					});
				},
			};
			request(params);
		},
		toDeliveryPage(e) {
			/**
			 * 查看物流
			 */
			uni.navigateTo({
				url:
					"/pages/express-delivery/express-delivery?orderNum=" +
					e.currentTarget.dataset.ordernum,
			});
		},
		onConfirmReceive(e) {
			/*确认收货*/
			var ths = this;
			uni.showModal({
				title: "",
				content: "我已收到货？",
				confirmColor: "#eb2444",
				success(res) {
					if (res.confirm) {
						uni.showLoading({
							mask: true,
						});

						var params = {
							url: "/p/myOrder/receipt/" + e.currentTarget.dataset.ordernum,
							method: "PUT",
							data: {},
							callBack: function (res) {
								//console.log(res);
								ths.loadOrderData(ths.sts, 1);
								uni.hideLoading();
							},
						};
						request(params);
					} else if (res.cancel) {
						//console.log('用户点击取消')
					}
				},
			});
		},
	},
};
</script>

<style>
/* pages/orderList/orderList.wxss */

page {
	background-color: #f4f4f4;
	color: #333;
}

/* 头部菜单 */

.order-tit {
	position: fixed;
	top: 0;
	display: flex;
	justify-content: space-around;
	z-index: 999;
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	background-color: #fff;
	border-bottom: 2rpx solid #f4f4f4;
}

.order-tit text {
	display: block;
	font-size: 28rpx;
	color: 999;
	width: 100rpx;
	text-align: center;
}

.order-tit text.on {
	border-bottom: 4rpx solid #eb2444;
	color: #eb2444;
}

/*  end 头部菜单 */

.main {
	margin-top: 100rpx;
}

/* 商品列表 */

.prod-item {
	background-color: #fff;
	margin-top: 15rpx;
	font-size: 28rpx;
}

.prod-item .item-cont .prod-pic image {
	width: 180rpx;
	height: 180rpx;
}

.prod-item .order-num {
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
}

.order-state {
	display: flex;
	align-items: center;
	font-size: 24rpx;
}

.prod-item .item-cont .categories {
	white-space: nowrap;
}

.prod-item .item-cont {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	border-radius: 10rpx;
	display: -webkit-flex;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	background: #fafafa;
}

.prod-item .order-num .clear-btn {
	width: 32rpx;
	height: 32rpx;
	font-size: 0;
	vertical-align: top;
	margin-left: 42rpx;
	position: relative;
}

.prod-item .order-num .clear-btn::after {
	content: " ";
	display: block;
	position: absolute;
	left: -10px;
	top: 0rpx;
	width: 1px;
	height: 32rpx;
	background: #ddd;
}

.prod-item .order-num .clear-btn .clear-list-btn {
	width: 100%;
	height: 100%;
	vertical-align: middle;
}

.prod-item .item-cont .prod-pic {
	font-size: 0;
	display: inline-block;
	width: 160rpx;
	height: 160rpx;
	overflow: hidden;
	background: #fff;
	margin-right: 16rpx;
}

.prod-item .item-cont .prod-pic image {
	width: 100%;
	height: 100%;
}

.prod-item .item-cont .prod-info {
	margin-left: 10rpx;
	font-size: 28rpx;
	width: 100%;
	position: relative;
	height: 160rpx;
	-webkit-flex: 1;
	-ms-flex: 1;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	flex: 1;
}

.prod-item .item-cont .prod-info .prodname {
	font-size: 28rpx;
	line-height: 36rpx;
	max-height: 86rpx;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	word-break: break-all;
}

.prod-item .item-cont .prod-info .prod-info-cont {
	color: #999;
	line-height: 40rpx;
	margin-top: 10rpx;
	font-size: 22rpx;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	word-break: break-all;
}

.prod-item .total-num {
	text-align: right;
	padding: 20rpx 30rpx;
	font-size: 28rpx;
}

.prod-item .price-nums .prodprice {
	color: #333;
	position: absolute;
	bottom: 0;
}

.prod-item .price-nums .prodcount {
	position: absolute;
	bottom: 5rpx;
	right: 0;
	color: #999;
	font-family: verdana;
}

.prod-item .total-num .prodprice {
	display: inline-block;
	color: #333;
}

.prod-item .total-num .prodcount {
	margin-right: 20rpx;
}

.prod-item .prod-foot {
	padding: 20rpx 30rpx;
	border-top: 2rpx solid #e6e6e6;
}

.prod-item .prod-foot .total {
	font-size: 25rpx;
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #e9eaec;
}

.prod-item .prod-foot .btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.other-button-hover {
	background-color: blue;
}

.button-hover {
	background-color: red;
}

/** 添加自定义button点击态样式类**/

.button-hover {
	background-color: blue;
}

.button {
	margin-left: 10px;
	font-size: 26rpx;
	background: #fff;
	padding: 10rpx 30rpx;
	border-radius: 80rpx;
	border: 2rpx solid #e1e1e1;
}

.button.warn {
	color: #eb2444;
	border-color: #eb2444;
}

/* end 商品列表 */

.empty {
	font-size: 24rpx;
	margin-top: 100rpx;
	text-align: center;
	color: #999;
	height: 300rpx;
	line-height: 300rpx;
}

/* 根据状态显示不同的颜色 */

.order-state .order-sts.red {
	color: #eb2444;
}

.order-state .order-sts.gray {
	color: #999;
}
</style>
